*,
*:before,
*:after {
  box-sizing: border-box;
  margin    : 0;
  padding   : 0;
}

html {
  height: 100vh;
}

.container {
  display    : flex;
  flex-flow  : row nowrap;
  align-items: stretch;
  height     : 100vh;
}

.container .ctrl {
  flex            : 480px 0 0;
  padding         : 1em;
  background-color: #3b4393;
  color           : #fff;
  height          : 100%;
}

.container .ctrl h1 {
  text-align: center;
  color     : #fff;
}

.container .ctrl h2 {
  color   : #fd971f;
  position: relative;
  margin  : 0.5em;
  cursor  : pointer;
}

.container .ctrl h2:hover::before {
  background-color: #bbccff;
}

.container .ctrl .row {
  padding      : 0.3em;
  border-bottom: 1px dashed rgba(255, 255, 255, .5);
}

.container .ctrl .row:first-of-type {
  border-top: 1px dashed rgba(255, 255, 255, .5);
}

.container .ctrl label {
  display    : inline-block;
  width      : 10em;
  line-height: 2em;
}

.container .ctrl input,
.container .ctrl select {
  position: relative;
  display : inline-block;
  width   : 18em;
  height  : 2em;
}

.container .ctrl input[type=range] {
  top: 0.6em;
}

.container .ctrl input[type=radio] {
  margin: 0 1em;
  width : 1em;
  top   : 0.6em;
}

.container .ctrl input[type=color] {
  width   : 4em;
}

.container .ctrl input[type=checkbox] {
  margin: 0 1em;
  width : 1em;
  top   : 0.4em;
}

.container .ctrl h2::before {
  content         : "";
  width           : 4px;
  height          : 20px;
  background-color: #332266;
  position        : absolute;
  left            : -10px;
  top             : 6px;
  transition      : background-color .5s;
}

.container .ctrl code {
  border-radius: 10px;
}

.container .prev {
  flex   : 600px 3 1;
  padding: 0em;
}

/* <select> styles */
select {
  /* Reset */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  outline: 0;
  font: inherit;
  /* Personalize */
  /* width: 20em; */
  height: 3em;
  padding: 0 4em 0 1em;
  background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg) no-repeat right 0.8em center/1.4em, linear-gradient(to left, rgba(255, 255, 255, 0.3) 3em, rgba(255, 255, 255, 0.2) 3em);
  color: white;
  border-radius: 0.25em;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
  /* <option> colors */
  /* Remove focus outline */
  /* Remove IE arrow */
select option {
  color: inherit;
  background-color: #320a28;
}
select:focus {
  outline: none;
}
select::-ms-expand {
  display: none;
}